<template>
    <div style="text-align: center;height: 100vh;">
        <div>
            <br/><br/><br/><br/><br/>
            <h1 style="font-weight: 800;margin-bottom: 10px;">登录</h1>
            <div>
                <el-form
                ref="ruleFormRef"
                style="width: 600px;margin: 0 auto;text-align: center;"
                :model="ruleForm"
                :rules="rules"
                label-width="auto"
                class="demo-ruleForm"
                :size="formSize"
                status-icon
            >
                <el-form-item label="用户名：" prop="username" style="text-align: center;">
                <el-input v-model="ruleForm.username" />
                </el-form-item>

                <el-form-item label="密码：" prop="password">
                    <el-input v-model="ruleForm.password" type="password" show-password/>
                </el-form-item>

                <el-form-item label="验证码：" prop="shuyan">
                    <el-input v-model="ruleForm.shuyan" style="width: 150px;"/> &nbsp;
                    <el-tag type="danger" @click="GetSetCode">{{ ruleForm.SetCode }}</el-tag>
                </el-form-item>

                <el-form-item label=" ">
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    登录
                </el-button>
                <el-button @click="AddUsers">注册</el-button>
                </el-form-item>

            </el-form>
            </div>
        </div>
    </div>
</template>
    
<script setup lang="ts" >

import axios from 'axios';
import { reactive, ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute, useRouter } from 'vue-router';
import http from '../http.js'
const route = useRoute()
const router = useRouter()

import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const locationOptions = ['Home', 'Company', 'School']
//表单字段
const ruleForm = reactive({
    username: '',
    password: '',
    systemCode: '50f21dfe-25d7-4594-985b-0e3608af2b6f',
    SetCode: '',
    codeResult: '',
    shuyan:'',
})

//验证
const rules = reactive<FormRules>({
    username: [
    { required: true, message: '用户名不能为空', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '密码不能为空', trigger: 'blur' },
    ],
    shuyan: [
        { required: true, message: '验证码不能为空', trigger: 'blur' },
    ],
})
onMounted(() => {
    GetSetCode();//显示验证码
   
})
//验证码 获取随机数 
const getNumber=()=>{
  let number = Math.ceil(Math.random()*10)
  return number
}
//验证码 获取随机运算符
const getRand = () =>{
  let sign = "+-*/"
  let index = Math.floor(Math.random()*sign.length)
  return sign[index] 
}
//验证码
const GetSetCode=()=>{
  let code = ""
  let num1 = getNumber()
  let sign = getRand()
  let num2 = getNumber()
  let result = 0
  switch(sign){
    case "+":
      result = num1+num2
      break
    case "-":
      result = num1-num2
      break
    case "*":
      result = num1*num2
      break
    case "/":
      result = Math.floor(num1/num2)
      break
  }
  code = num1 + sign + num2 + "=?"
  ruleForm.SetCode = code
  ruleForm.codeResult = result.toString()
}
//登录
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
        axios.post(http.RBACdu+'/api/Login/Login',ruleForm)
        .then((res)=>{
            if (res.data.code == 200) {
                // console.log(res.data)
                // ElMessage({ message: res.data.message, type: 'success', })
                localStorage.setItem('ToKen', res.data.data)
                router.push('/Translation')
            }
            else {
                ElMessage({
                    message: res.data.message,
                    type: 'warning',
                })
                return
            }
        })
        .catch(err => {
            console.log(err)    
        })
    } else {
      console.log('error submit!', fields)
    }
  })
}
//注册
const AddUsers = () => {
    router.push('/AddUser')
}

    
</script>

    
<style>

</style>